<template>
	<min-pop ref="popups" @change='changePop' type="bottom">
		<view class="pl" @click='isFocusPl = false' :style="{height: cHeight}">
			<view class="pl-title">
				<text class="col-dfb "> </text>
				<text class="col-dfb ">{{ total }}条评论</text>
				<text @click="closePop" class="col-dfb fs24">×</text>
			</view>
			<scroll-view scroll-y class="pl-list" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-top="scrollTop">
				<view class="pl-item" v-for="item in commentList" :key="item.user_id">
					<image class="img-item" :src="item.upload_avatar ? item.upload_avatar.path_text : '/static/home/default_user.png'"
					 mode="widthFix"></image>
					<view class="content">
						<view class="pl-title">
							<text class="col-747 fs14">{{ item.user_info && item.user_info.nickname }}</text>
						</view>
						<view class="pl-text">
							<text class="col-dfb fs14 ">{{ item.content }}</text>
							<text class="col-747 fs12 mt10">{{ fmt(item.created_at) }}</text>
						</view>
					</view>
				</view>
				<view class="liubai">
					<text class="col-dfb fs14">{{loading ? '加载中...' : '没有更多评论了'}}</text>
				</view>
			</scroll-view>
			<view class="inputs" :style="{'bottom':plBottom}" :class="{'active':active}">
				<input class="col-dfb" :class="{'active':active}" @confirm="confirm" @blur="handleBlur" @focus="handleFocusPl"
				 :adjustPosition='false' placeholder-class="placeholder-class" type="text" v-model="plValue" :maxlength="100"
				 placeholder="可爱的你，留下一些精彩评论吧~" />
				<image v-if="active" @click="handlePlPost" class="postPl" src="/static/icon/fasong.png" mode="widthFix"></image>
			</view>

		</view>
	</min-pop>
</template>

<script>
	import minPop from '@/components/uni-popup/uni-popup.vue'
	import {
		apiGetCommentList,
		apiPostSendComment
	} from '@/api/home.js';
	import {
		formatDays,
		formatDate
	} from '@/utils/common.js';

	export default {
		components: {
			minPop,
		},
		data() {
			return {
				isFocusPl: false, //输入
				plBottom: 0,
				plValue: '',
				active: false,
				total: 0,
				page: 1,
				page_size: 15,
				userId: null,
				loading: false,
				userInfo: {},
				fmt: formatDays,
				commentList: [],
				scrollTop: '', // 滚动条的位置
				old: {
					scrollTop: 0
				},
				keyboard: 0
			}
		},
		mounted() {
			// 评论列表高度
			let height = uni.getSystemInfoSync().screenHeight
			this.cHeight = height * 0.7 + 'px'

			uni.onKeyboardHeightChange(res => {
				if (uni.getSystemInfoSync().platform === "android") {
					this.plBottom = res.height
				} else if (uni.getSystemInfoSync().platform === "ios") {
					this.plBottom = res.height - 34
				}
			})

		},
		methods: {
			closePop() {
				this.$refs.popups.close()
			},
			openPop(id) {
				let self = this
				this.$nextTick(() => {
					self.total = 0
					self.commentList = []
					self.$refs.popups.open()
					self.userId = id
					setTimeout(() => {
						self.getCommentList({
							user_work_id: id
						})
					}, 20)
				})
			},
			getCommentList(options) {
				let self = this
				self.loading = true

				apiGetCommentList({
					page: this.page,
					page_size: this.page_size,
					user_work_id: self.userId,
					...options
				}).then(res => {
					console.log('评论数据:', res);
					if (res.status == 0 && res.data) {
						self.loading = false
						self.total = res.data.total
						self.commentList = [...self.commentList, ...res.data.data]
					}
				}).catch(err => {
					self.loading = false
				})
			},
			changePop(bool) {
				if (bool.show) {
					// 获取用户信息
					this.userInfo = uni.getStorageSync('userinfo')
					uni.hideTabBar()
				} else {
					uni.showTabBar()
					this.handleBlur()
					this.plValue = ''
				}
			},
			handleFocusPl(e) {

				// // if (uni.getSystemInfoSync().platform === "android") {
				// 	this.plBottom = this.keyboard + 'px'
				// // } else if (uni.getSystemInfoSync().platform === "ios") {
				// // 	this.plBottom = e.detail.height - 34 + 'px'
				// // }
				this.active = true
			},
			handleBlur() {
				// this.plBottom = '0px'
				this.active = false
			},
			confirm() {
				this.handlePlPost()
			},
			handlePlPost() {
				let self = this
				self.scrollTop = self.old.scrollTop
				if (self.plValue) {
					apiPostSendComment({
						user_work_id: self.userId,
						content: self.plValue
					}).then(res => {
						if (res.status === 0) {
							self.handleBlur()
							self.total++
							self.commentList.unshift({
								user_id: self.userInfo && self.userInfo.user_info && self.userInfo.user_info.user_id,
								upload_avatar: {
									path_text: self.userInfo && self.userInfo.upload_avatar ? self.userInfo.upload_avatar.path_text : '/static/home/default_user.png'
								},
								content: self.plValue,
								created_at: formatDate(new Date()),
								user_info: {
									user_id: self.userInfo.user_info.user_id,
									nickname: self.userInfo.user_info.nickname,
								}
							})
							
							console.log('结果',self.commentList);

							self.plValue = ''
							self.$nextTick(function() {
								self.scrollTop = 0
							});
							uni.hideKeyboard();
							// plus.key.hideSoftKeybord();
							self.$emit('commentAdd')
						}
					})
				} else {
					uni.showToast({
						title: '请先写点东西哟~',
						icon: 'none'
					})
				}
			},
			// 下拉到底部请求
			scrolltolower() {
				this.getCommentList({
					page: ++this.page
				})
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			}

		}
	}
</script>

<style>
	.pl {
		height: 500px;
		background-color: #1C1B2B;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		opacity: 0.98;
		padding-left: 12px;
		padding-right: 19px;
		padding-top: 20px;
		position: relative;
	}

	.col-dfb {
		color: #DDDBFB;
	}

	.fs24 {
		font-size: 32px;
	}

	.pl-title {
		flex-direction: row;
		justify-content: space-between;
		font-size: 12px;
	}

	.inputs {
		position: absolute;
		right: 0;
		left: 0;

		padding-left: 12px;

		padding-right: 12px;

		padding-top: 20px;
		padding-bottom: 20px;
		height: 80px;
		background-color: #0C0B18;
		font-size: 14px;
	}

	.postPl {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 70px;
		height: 30px;
		z-index: 99999
	}

	.placeholder-class {
		font-size: 14px;
		color: #434254;
	}

	.active {
		background-color: #fff;
		color: #000000;
		padding-right: 50px;
	}

	.pl-item {
		margin-bottom: 30px;
		margin-top: 10px;
	}

	.pl-list {
		height: 580px;

	}

	.liubai {
		height: 180px;
		align-items: center;
	}

	.col-747 {
		color: #747384;
	}

	.pl-title {
		margin-bottom: 8px;
	}

	.pl-item {
		flex-direction: row;
	}

	.fs14 {
		font-size: 14px;
	}

	.fs12 {
		font-size: 12px
	}

	.img-item {
		width: 40px;
		height: 40px;
		margin-right: 10px;
		border-radius: 50%;
	}

	.mt10 {
		margin-top: 10px;
	}


	.content {
		width: 294px;
	}
</style>
